<template>
  <div style="height: 100%;width:100%;" :style="styleObj" v-loading="loading">
    <div v-if="showCard" class="padding bg-white">
      <el-checkbox-group v-model="checked">
        <el-checkbox v-for="item in checkbox" :key="item.code" :label="item.code">{{item.name}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div v-if="showCard" class="flex flex-wrap" style="margin: 1em -0.5em 0 -.5em;">
      <div class="card-wrap" v-for="item in lists" :key="item.id">
        <div class="card-item" @click="clickCardItem(item)">
          <h3 class="card-item-title">{{item.enterpriseName}}</h3>
<!--          <ul class="card-item-ul">-->
<!--            <li class="card-item-li">-->
<!--              <span class="label">能源消费总量：</span>-->
<!--              <span class="value">{{item.total1}} 万吨标准煤</span>-->
<!--            </li>-->
<!--            <li class="card-item-li">-->
<!--              <span class="label">用电量：</span>-->
<!--              <span class="value">{{item.total2}} 千瓦时</span>-->
<!--            </li>-->
<!--            <li class="card-item-li">-->
<!--              <span class="label">用煤量：</span>-->
<!--              <span class="value">{{item.total3}} 万吨</span>-->
<!--            </li>-->
<!--          </ul>-->
        </div>
      </div>
    </div>
    <div v-if="showDetail" class="flex height-100">
      <div class="left-content height-100">
        <div class="padding bg-white select-wrap">
          <el-select v-model="selected" filterable clearable class="width-100" @change="onEnterpriseChange">
            <el-option
              v-for="option in lists" :key="option.enterpriseCode"
              :label="option.enterpriseName" :value="option.id"
            ></el-option>
          </el-select>
        </div>
        <el-scrollbar style="width: 100%;height:calc(100% - 60px);" wrap-style="overflow-x: hidden;">
          <enterprise-panel :info="enterpriseInfo"></enterprise-panel>
        </el-scrollbar>
      </div>
      <div class="right-content height-100">
        <el-scrollbar style="width: 100%;height:100%;" wrap-style="overflow-x: hidden;">
          <div class="grid-content">
            <grid-item-one :info="info1"></grid-item-one>
            <grid-item-two title="企业能源消费占比"></grid-item-two>
            <grid-item-three title="能源消费趋势预测"></grid-item-three>
            <grid-item-four title="万元产值单耗趋势"></grid-item-four>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import EnterprisePanel from './enterprise-panel'
import GridItemOne from './grid-item-one'
import GridItemTwo from './grid-item-two'
import GridItemThree from './grid-item-three'
import GridItemFour from './grid-item-four'
import { getListEnterprise, loadEnterprise } from '@/api/enterprose'

export default {
  name: 'energy-efficiency-analysis-enterprise',
  components: {
    EnterprisePanel,
    GridItemOne,
    GridItemTwo,
    GridItemThree,
    GridItemFour
  },
  data () {
    return {
      selected: '',
      info: {},
      info1: [
        {
          label: '油品',
          count: '0',
          unit: '万吨标准煤',
          content: '同比：0',
          icon: 'topsales'
        },
        {
          label: '电力',
          count: '4.03',
          unit: '亿千瓦时',
          content: '同比：-53.02%',
          icon: 'topsales'
        },
        {
          label: '煤炭',
          count: '61.77',
          unit: '万吨',
          content: '同比：-22.58%',
          icon: 'tongxunlu'
        },
        {
          label: '天然气',
          count: '1837.43',
          unit: '万立方米',
          content: '同比：-15.19%',
          icon: 'topsales'
        },
      ],
      lists: [],
      loading: false,
      showCard: false,
      showDetail: false,
      checked: [],
    }
  },
  computed: {
    districts () {
      return this.$store.getters['user/districts']
    },
    checkbox () {
      return this.districts
    },
    styleObj () {
      return this.showCard
        ? {
            'overflow-y': 'auto',
            'overflow-x': 'hidden',
          }
        : 'overflow: hidden;'
    },
    enterpriseInfo () {
      const {
        enterpriseName,
        districtBelongName,
      } = this.info
      return [
        { name: '企业名称', value: enterpriseName },
        { name: '所在区域', value: districtBelongName },
        { name: '所属行业', value: '制造业' },
        { name: '能耗规模', value: '5000吨以下' },
        { name: '能耗在线监测设备情况', value: '已接入10个单位' },
        { name: '能源管理岗位备案情况', value: '已备案10人' },
        { name: '节能项目备案情况', value: '已备案1人' },
        { name: '联系人', value: '曹德旺' },
        { name: '联系方式', value: '13633663366' },
      ]
    },
  },
  watch: {
    // 企业ID
    '$route.query.enterpriseCode': function (val) {
      this.watchHandler()
    },
    checked () {
      this.queryLists()
    },
  },
  mounted () {
    this.watchHandler()
  },
  methods: {
    watchHandler () {
      const { enterpriseCode, districtCode } = this.$route.query
      if (!enterpriseCode) {
        this.checked = districtCode ? districtCode.split(',') : []
        this.showCard = true
        this.showDetail = false
        this.queryLists()
      } else {
        this.selected = this.enterpriseCode = Number(enterpriseCode)
        this.showCard = false
        this.showDetail = true
        this.queryLists()
        this.getDetails()
      }
    },
    queryLists () {
      this.loading = true
      return getListEnterprise(this.checked).then(res => {
        if (res.code === 200) {
          this.lists = res.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getDetails () {
      const enterpriseCode = this.enterpriseCode
      if (enterpriseCode) {
        this.getEnterpriseInfo(enterpriseCode)
      }
    },
    getEnterpriseInfo (enterpriseCode) {
      return loadEnterprise(enterpriseCode).then(res => {
        if (res.code === 200) {
          this.info = res.data
        }
      })
    },
    clickCardItem (item) {
      this.$router.push({
        path: this.$route.path,
        query: {
          enterpriseCode: item.id,
        }
      })
      this.showCard = false
      this.getDetails()
      this.showDetail = true
    },
    onEnterpriseChange () {
      this.enterpriseCode = this.selected
      this.$nextTick(() => {
        this.getDetails()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .card-wrap {
    flex: 0 0 25%;
    padding: 0 .5em;
    overflow: hidden;
  }
  .card-item {
    background: white;
    padding: 2rem 1rem;
    margin-bottom: 1em;
    border-radius: .3em;
    cursor: pointer;
    transition: all .3s;
    &:hover {
      box-shadow: 0 .25rem 1rem rgba(0,0,0,0.2);
    }
  }
  .card-item-title {
    margin: 0;
    text-align: center;
  }
  .card-item-ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    margin-top: .5em;
    font-size: 12px;
    line-height: 1.8;
    .label {
      color: #909399;
    }
    .value {
    }
  }
  .card-item-title,
  .card-item-li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .left-content {
    width: 500px;
    flex-shrink: 0;
    transition: width .3s;
    @media screen and (max-width: 1330px) {
      width: 300px;
    }
  }
  .right-content {
    flex: 1;
    margin-left: $gutter;
    width: calc(100% - 500px - $gutter);
  }
  .grid-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: $gutter;

    ::v-deep .info-head {
      padding: 20px $gutter 0 $gutter;
      font-size: 16px;
    }

    .content-block {
      background: white;
      border-radius: 4px;
    }
    .block-1 {
      grid-column-start: 1;
      grid-column-end: 3;
    }
    .block-2 {
      grid-column-start: 1;
      grid-column-end: 3;
    }
    .block-3 {
      grid-column-start: 1;
      grid-column-end: 2;
    }
    .block-4 {
      grid-column-start: 2;
      grid-column-end: 3;
    }
  }
</style>
